<template>
  <div v-loading="loading" class="energy-consume">
    <div class="chart-wrap">
      <div class="lf-wrap">
        <div class="black mg-bt-16">
          <modelTitle :title="'总览'" />
          <div class="content">
            <div class="top">
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/coal48.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">折标煤</div>
                  <div>
                    <span class="num">{{ dataObj?.scoal || "-" }}</span
                    ><span class="unit">tce</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/CDAIA.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">CDA/IA</div>
                  <div>
                    <span class="num">{{ dataObj?.cda || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/HPCDA.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">HPCDA</div>
                  <div>
                    <span class="num">{{ dataObj?.hpcda || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/XCDA.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">XCDA</div>
                  <div>
                    <span class="num">{{ dataObj?.xcda || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/GN2.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">GN2</div>
                  <div>
                    <span class="num">{{ dataObj?.gn2 || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/PN2.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">PN2</div>
                  <div>
                    <span class="num">{{ dataObj?.pn2 || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="btm">
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/co248.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">碳排放</div>
                  <div>
                    <span class="num">{{ dataObj?.ecarbon || "-" }}</span
                    ><span class="unit">tCO2e</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/PAr.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">Ar</div>
                  <div>
                    <span class="num">{{ dataObj?.ar || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/PO2.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">O2</div>
                  <div>
                    <span class="num">{{ dataObj?.o2 || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/Phe.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">he</div>
                  <div>
                    <span class="num">{{ dataObj?.he || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/H2.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">H2</div>
                  <div>
                    <span class="num">{{ dataObj?.h2 || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <img src="@/assets/images/energy/supplyOverview/CO2气体.png" class="img" alt="图片" />
                <div class="rt">
                  <div class="text">CO2</div>
                  <div>
                    <span class="num">{{ dataObj?.co2 || "-" }}</span
                    ><span class="unit">Nm³</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rt-wrap">
        <modelTitle :title="'供气趋势'" />
        <div class="switch">
          <px-switch
            v-if="params?.queryTimeGranularity === 'Monthly'"
            v-model="switchFirstVal"
            class="first-switch"
            active-text="同期数据"
            @change="switchFirstChange"
          />
          <px-switch
            v-if="params?.queryTimeGranularity === 'Monthly'"
            v-model="switchSecondVal"
            class="second-switch"
            active-text="同期数据"
            @change="switchSecondChange"
          />
        </div>
        <btnImageAndData class="btn1" @exportChange="val => handlerExport(val, 'firstLineChartRef')" />
        <btnImageAndData class="btn2" @exportChange="val => handlerExport(val, 'secondLineChartRef')" />
        <div class="chart-box">
          <div ref="firstLineChartRef" class="chart" />
          <div ref="secondLineChartRef" class="chart" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, computed, nextTick, getCurrentInstance } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import btnImageAndData from "@/views/common/energy/components/btnImageAndData/index.vue";
import { getSupplyGasAPI } from "@/api/energy/supplyOverview";
import { drawLineChart, drawStackedBarChart } from "../utils.js";
import { cloneDeep } from "@pureadmin/utils";

const { proxy } = getCurrentInstance();

const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  activeName: {
    type: String,
    default: () => ""
  }
});

const firstLineChartRef = ref();
const secondLineChartRef = ref();

const state = reactive({
  loading: false,
  dataObj: {
    cda: "",
    hpcda: "",
    xcda: "",
    gn2: "",
    pn2: "",
    ar: "",
    o2: "",
    he: "",
    h2: "",
    co2: "",
    scoal: "",
    supplyRatio: [],
    supplyTrend: {
      xaxis: [],
      yaxis: []
    }
  },
  switchFirstVal: false,
  switchSecondVal: false,
  firstType: ["CDA/IA", "HPCDA", "XCDA", "GN₂", "PN₂", "CDA/IA-同期", "HPCDA-同期", "XCDA-同期", "GN₂-同期", "PN₂-同期"],
  secondType: ["Ar", "O₂", "He", "H₂", "CO₂", "Ar-同期", "O₂-同期", "He-同期", "H₂-同期", "CO₂-同期"]
});
const { loading, dataObj, switchFirstVal, switchSecondVal, firstType, secondType } = toRefs(state);

const queryParams = computed(() => props.params);

onMounted(() => {
  getData();
});

let chartObj = {};

const getData = async () => {
  try {
    state.loading = true;
    const { startDate, endDate, dimension } = getParams();
    const params = {
      factoryId: "",
      facCode: "",
      dimension: dimension || "",
      startDate: startDate || "",
      endDate: endDate || ""
    };
    if (startDate && endDate) {
      const res = await getSupplyGasAPI(params);
      state.dataObj = JSON.parse(JSON.stringify(res));
      nextTick(() => {
        if (res?.supplyTrend) {
          res.supplyTrend.yaxis = res?.supplyTrend?.yaxis?.filter(i => !i?.name?.includes("同期"));
          let firstSupplyTrend = cloneDeep(res.supplyTrend);
          let secondSupplyTrend = cloneDeep(res.supplyTrend);
          firstSupplyTrend.yaxis = firstSupplyTrend.yaxis?.filter(i => firstType.value.find(e => e === i.name));
          secondSupplyTrend.yaxis = secondSupplyTrend.yaxis?.filter(i => secondType.value.find(e => e === i.name));
          chartObj.firstLineChartRef = drawLineChart(firstLineChartRef.value, firstSupplyTrend);
          chartObj.secondLineChartRef = drawLineChart(secondLineChartRef.value, secondSupplyTrend);
          // chartObj.firstLineChartRef = drawStackedBarChart(firstLineChartRef.value, firstSupplyTrend);
          // chartObj.secondLineChartRef = drawStackedBarChart(secondLineChartRef.value, secondSupplyTrend);
        }
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

// 获取参数
const getParams = () => {
  let timeType = queryParams.value.queryTimeGranularity;
  let startDate = queryParams.value.startTime || "";
  let endDate = queryParams.value.endTime || "";

  let timeObj = {
    Hourly: "HOUR",
    Daily: "DAY",
    Monthly: "MONTH",
    Yearly: "YEAR"
  };
  let dimension = timeObj[timeType] || MONTH;
  return {
    startDate,
    endDate,
    dimension
  };
};
// 导出方法
const handlerExport = (val1, val2) => {
  if (val1 === "data") {
    const { startDate, endDate, dimension } = getParams();
    const params = {
      factoryId: "",
      facCode: "",
      dimension: dimension || "",
      startDate: startDate || "",
      endDate: endDate || ""
    };
    // params.type = val2;
    proxy.download("post", "/energy/supplyMeasure/exportGas", params, "供给计量-大宗气.xlsx");
  } else {
    let myChart = chartObj[val2];
    if (!myChart) return;
    // 获取Base64图片数据
    const imgUrl = myChart.getDataURL({
      type: "png",
      pixelRatio: 2,
      backgroundColor: "#fff"
    });
    // 创建并触发下载链接
    const link = document.createElement("a");
    link.href = imgUrl;
    link.download = "chart.png";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};
const switchFirstChange = val => {
  let obj = {};
  obj.xaxis = state.dataObj.supplyTrend.xaxis;
  obj.yaxis = state.dataObj?.supplyTrend?.yaxis?.filter(i => (val ? i : !i?.name?.includes("同期")));
  let firstSupplyTrend = cloneDeep(obj);
  firstSupplyTrend.yaxis = firstSupplyTrend.yaxis?.filter(i => firstType.value.find(e => e === i.name));
  chartObj.firstLineChartRef = drawLineChart(firstLineChartRef.value, firstSupplyTrend);
};
const switchSecondChange = val => {
  let obj = {};
  obj.xaxis = state.dataObj.supplyTrend.xaxis;
  obj.yaxis = state.dataObj?.supplyTrend?.yaxis?.filter(i => (val ? i : !i?.name?.includes("同期")));
  let secondSupplyTrend = cloneDeep(obj);
  secondSupplyTrend.yaxis = secondSupplyTrend.yaxis?.filter(i => secondType.value.find(e => e === i.name));
  chartObj.secondLineChartRef = drawLineChart(secondLineChartRef.value, secondSupplyTrend);
};
</script>

<style lang="scss" scoped>
.energy-consume {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.mg-bt-16 {
  margin-bottom: 16px;
}

.chart-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;

  .lf-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;

    .black {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 16px 24px;
      background: #fff;
      border-radius: 4px;

      .content {
        flex: 1;
        margin-top: 48px;

        .top {
          display: flex;
          justify-content: space-between;
        }

        .btm {
          display: flex;
          justify-content: space-between;
          margin-top: 40px;
        }

        .item {
          display: flex;
          flex: 1;

          .img {
            width: 48px;
            height: 48px;
          }

          .rt {
            display: flex;
            flex-direction: column;
            margin-left: 12px;

            .num {
              font-size: 24px;
              font-weight: 500;
              word-break: break-all;
            }

            .unit {
              margin-left: 4px;
            }
          }
        }
      }

      .chart {
        flex: 1;
        margin-top: 26px;
      }
    }
  }

  .rt-wrap {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;
    .chart-box {
      flex: 1;
      margin-top: 26px;
      display: flex;
    }
    .chart {
      flex: 1;
    }
  }

  .btn1 {
    position: absolute;
    top: 16px;
    right: calc(50% + 24px);
    :deep(.px-button):nth-child(2) {
      display: none;
    }
  }
  .btn2 {
    position: absolute;
    top: 16px;
    right: 24px;
  }
}
.switch {
  display: flex;
  .first-switch,
  .second-switch {
    flex-grow: 1;
  }
}
</style>
